<template>
    <div id="reserveMoney">
      <div class="content-wrapper">
        <div class="actions" style="padding-bottom: 10px">
          <div class="left">
            <div>
              <el-button
                @click="newlyIncreasedadd(0)"
                type="primary"
                plain
                v-if="activeName == 0"
                >新增</el-button
              >
              <el-button
                @click="newlyDelete"
                type="primary"
                plain
                v-if="activeName == 0"
                >删除</el-button
              >
              <el-button
                @click="founddata(1)"
                type="primary"
                plain
                v-if="activeName == 0"
                >发起审批</el-button
              >
              <el-button
                @click="exportDerive()"
                plain
                type="primary"
                data-tracker="P49-4"
                v-permission="'finance_customer_delete'"
                >导出</el-button
              >
            </div>
            <div></div>
          </div>
          <div class="right" style="display: flex">
            <el-button
              type="primary"
              size="mini"
              @click="resultClickFn"
              style="height: 28px; margin: 0px 10px 0px 0px"
              >重置
            </el-button>
            <SettinUp
              :settype="headerId"
              :objSettinUpdata="objSettinUp"
              :key="activeName"
            ></SettinUp>
          </div>
        </div>
        <!-- 表格 -->
        <div class="table" v-if="header_data_list.length > 0" :key="activeName">
          <TableHeader
            ref="TableHeaderList"
            :header_data_list="header_data_list"
            :HeaderData="HeaderData"
            :propMap="propMap"
            :redact="''"
            :particulars="''"
            :objheader="objheader"
            @orderIdNumsEvent="handleDeleteType"
            :operation_type="3"
          >
            <template #operation="{ scope }">
              <el-button
                @click="newlyIncreased(2, scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                v-if="activeName === '0'"
                type="text"
                size="small"
                @click="newlyIncreased(1, scope.row)"
                >编辑</el-button
              >
            </template>
          </TableHeader>
        </div>
        <div class="actions" style="padding: 10px 0; width: 100%">
          <div class="left"></div>
          <div class="right">
            <el-pagination
              small
              background
              :current-page="paginations.pageIndex"
              :page-sizes="paginations.pageSizes"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import {
    zto_recharge_apply_list,
    zto_recharge_apply_delete,
    zto_recharge_apply_send_review,
    zto_recharge_apply_cancel_review,
    zto_recharge_apply_list_export,
  } from "@/api/finance";
  import { timestamp10 } from "@/utils/mUtils"; // 时间转化
  import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
  import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
  export default {
    name: "reserveMoney",
    components: { TableHeader, SettinUp },
    data() {
      return {
        labelPosition: "left",
        id_list: [],
        activeName: "0", //状态
        query: {
          status_list: [], //状态
          apply_no: "", //申请单号
          create_time: {
            start_time: "",
            end_time: "",
          }, //开始时间结束时间
          creation_time: [], //时间
          page: 1, //第几页
          page_size: 10, //一页几条
        },
        alltotal: 0,
        tableData: [],
        status_data: [
          {
            value: "0",
            label: "待审批",
          },
          {
            value: "1",
            label: "审批中",
          },
          {
            value: "2",
            label: "审批通过",
          },
          {
            value: "3",
            label: "已处理",
          },
          {
            value: "4",
            label: "已拒绝",
          },
        ],
        currentPage4: 1,
        paginations: {
          pageIndex: 1, // 当前位于哪页
          pageSize: 20, // 1页显示多少条
          pageSizes: [10, 20, 50, 100], //每页显示多少条
          total: 200,
          layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
        },
        searchParams: {},
        header_data_list: [],
        propMap: {},
        obj_list: {},
        HeaderData: [],
        waybillIdNums: [],
        operation_type: 0,
        dynParams: {},
      };
    },
    filters: {
      statuData(value) {
        // console.log(value, "rerwer");
        if (value == 0) {
          return "待审批";
        } else if (value == 1) {
          return "审批中";
        } else if (value == 2) {
          return "审批通过";
        } else if (value == 3) {
          return "已处理";
        } else if (value == 4) {
          return "已拒绝";
        }
      },
    },
    computed: {
      headerId() {
        return "61";
      },
    },
    mounted() {
    },
    watch: {
      $route: {
        handler(newV, oldV) {
          if (this.$route.query.Typedata == 0) {
            this.activeName = "0";
            this.handleClick();
          } else if (this.$route.query.Typedata == 1) {
            this.activeName = "1";
            this.handleClick();
          } else if (this.$route.query.Typedata == 2) {
            this.activeName = "2";
            this.handleClick();
          }
        },
        immediate: true,
        deep: true,
      },
    },
    methods: {
      handleTabClick() {
        this.paginations.pageIndex = 1;
        this.handleClick();
      },
      // 切换
      handleClick() {
        // 调用
        if (this.activeName == 0) {
          this.$router.push(
            { name: "ztoRechargeApply", query: { Typedata: this.activeName } },
            () => {},
            () => {}
          );
          Object.assign(this.$data.query, this.$options.data().query);
          this.PettyList();
        } else if (this.activeName == 1) {
          this.$router.push(
            { name: "ztoRechargeApply", query: { Typedata: this.activeName } },
            () => {},
            () => {}
          );
          Object.assign(this.$data.query, this.$options.data().query);
          this.PettyList();
        } else if (this.activeName == 2) {
          this.$router.push(
            { name: "ztoRechargeApply", query: { Typedata: this.activeName } },
            () => {},
            () => {}
          );
          Object.assign(this.$data.query, this.$options.data().query);
          this.PettyList();
        }
      },
      resultClickFn() {
        this.paginations.pageIndex = 1;
        this.paginations.pageSize = 20;
        this.$refs.TableHeaderList.childMethod();
      },
      objSettinUp() {
        this.PettyList();
      },
      // 备用金列表接口
      PettyList(setHeader = true) {
        var param = {
          ...this.query,
          status_list: this.settingStatus(),
          create_time: {
            start_time:
              this.query.creation_time.length == 0
                ? ""
                : timestamp10(this.query.creation_time[0]),
            end_time:
              this.query.creation_time.length == 0
                ? ""
                : timestamp10(this.query.creation_time[1]),
          },
          page: this.paginations.pageIndex,
          page_size: this.paginations.pageSize,
          ...this.searchParams,
          header_id: this.headerId + "",
        };
        this.dynParams = param;
        zto_recharge_apply_list(param).then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data.data;
            this.paginations.total = res.data.pagination.total;
            this.tableData.unshift({});
            this.header_data_list = this.tableData;
            if (setHeader) {
              this.HeaderData = res.data.item_list;
              this.Fntransformation(this.HeaderData);
            }
          }
        });
      },
      objheader(obj) {
        this.paginations.pageIndex = 1;
        this.searchParams = obj;
        this.PettyList(false);
      },
      Fntransformation(obj) {
        const result = {};
        for (const prop in obj) {
          if (obj.hasOwnProperty(prop)) {
            if (obj[prop].send_name !== "") {
              result[obj[prop].name] = obj[prop].show_name;
            } else {
              result[obj[prop].name] = obj[prop].name;
            }
          }
        }
        this.propMap = result;
      },
      handleSizeChange(val) {
        this.paginations.pageSize = val;
        this.PettyList();
      },
      handleCurrentChange(val) {
        this.paginations.pageIndex = val;
        this.PettyList();
      },
      newlyIncreasedadd() {
        this.$router.push({
          name: "ztoRechargeAdd",
          query: { Type: "0", TageType: this.activeName },
        });
      },
      handleDeleteType(ids, val) {
        this.handleSelectionChange(val);
      },
      handleSelectionChange(value) {
        this.id_list = value.map((item) => item.id);
      },
      newlyDelete() {
        // console.log(this.id_list, "multiple");
        if (this.id_list.length == 1) {
          var param = {
            id: this.id_list[0] + "",
          };
          zto_recharge_apply_delete(param).then((res) => {
            if (res.code == "10000") {
              this.open1("删除成功", "success");
              this.handleClick();
            }
          });
        } else {
          this.open1("创建失败", "warning");
        }
      },
      newlyIncreased(type, val) {
        // type 这个是 判断是 查看还是编辑 id 当行传递的 id Tage 表示的是类型  TageType 3 是审核记录管理
  
        this.$router.push({
          name: "ztoRechargeAdd",
          query: { Type: type, id: val.id, TageType: this.activeName },
        });
      },
      open1(value, type) {
        this.$message({
          message: value,
          type: type,
        });
      },
      // 审核
      founddata() {
        if (this.id_list.length == 1) {
          var param = {
            id: this.id_list[0] + "",
          };
          zto_recharge_apply_send_review(param).then((res) => {
            if (res.code == "10000") {
              this.open1("审核成功", "success");
              this.handleClick();
            }
          });
        } else {
          this.open1("请选择一条数据", "warning");
        }
      },
      // 取消审核
      withdraw() {
        if (this.id_list.length == 1) {
          var param = {
            id: this.id_list[0] + "",
          };
          zto_recharge_apply_cancel_review(param).then((res) => {
            if (res.code == "10000") {
              this.open1("取消审核成功", "success");
              this.handleClick();
            }
          });
        } else {
          this.open1("请选择一条数据", "warning");
        }
      },
      // 查询
      queryData() {
        this.PettyList();
      },
      // 重置
      replacement() {
        Object.assign(this.$data.query, this.$options.data().query);
        this.handleClick();
      },
      exportDerive() {
        var params = {
          ...this.query,
          status_list:this.settingStatus(),
          create_time: {
            start_time:
              this.query.creation_time.length == 0
                ? ""
                : timestamp10(this.query.creation_time[0]),
            end_time:
              this.query.creation_time.length == 0
                ? ""
                : timestamp10(this.query.creation_time[1]),
          },
          ...this.searchParams,
          header_id: this.headerId + "",
        };
        zto_recharge_apply_list_export(params).then((res) => {
          this.reqUrl = "https://" + res.data.loaded_url;
          window.open(this.reqUrl);
        });
      },
      settingStatus() {
        // 0,4 是待审批的
        var invoice_status = []
        if( this.activeName * 1 == 2 ) {
          invoice_status = [2, 3]
        }else if ( this.activeName * 1 == 0) {
          invoice_status = [0,4]
        } else {
          invoice_status =[this.activeName * 1]
        }
        return invoice_status
      }
    },
  };
  </script>
  <style scoped lang="less">
 
  
  ::v-deep .el-tabs--border-card {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  /deep/ .header_table .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  
  #reserveMoney {
    background-color: #fff;
    padding: 10px 15px;
  }
  
  .reserveseek {
    width: 100%;
  }
  
  .reserveseek_page {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }
  
  .reserveseek_button {
    margin-bottom: 10px;
  }
  
  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
  
    .el-button + .el-dropdown,
    .el-dropdown + .el-button {
      margin-left: 10px;
    }
  }
  
  .content-wrapper {
    // padding: 15px;
  }
  
  .tab.el-tabs--border-card {
    border: none;
    box-shadow: none;
  
    .el-tabs__content {
      padding: 0;
      height: 40px;
    }
  }
  
  /deep/.tab.el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }
  </style>